<template>
  <div class="_wz_cent_main _wz_testVide1">
    <Card :bordered="true" dis-hover style="height: 100%;">
      <p slot="title">视频列表</p>
      <div slot="extra" class="tv_box" style="padding: 4px 15px 0 0;">
        <span title="切换1个窗口">
          <i class="icon_num4" @click="numberWindows = 1"></i>
        </span>
        <span title="切换4个窗口">
          <i class="icon_num31" @click="numberWindows = 4"></i>
       </span>
        <span title="切换6个窗口">
           <i class="icon_num51" @click="numberWindows = 6"></i>
       </span>
        <span title="切换8个窗口">
         <i class="icon_num61" @click="numberWindows = 8"></i>
        </span>
        <span title="切换9个窗口">
         <i class="icon_num71" @click="numberWindows = 9"></i>
        </span>
        <span title="切换16个窗口">
          <i class="icon_num81" @click="numberWindows = 16"></i>
        </span>
        <Dropdown @on-click="changeVideo">
          <a href="javascript:void(0)">
           <span>
             <i class="icon_num1"></i>
             <i class="icon icon_xl"></i>
            </span>
          </a>
          <DropdownMenu slot="list">
            <DropdownItem name="stopVideo">停止所有视频</DropdownItem>
<!--            <DropdownItem name="reSetVideo">清除所有视频</DropdownItem>-->
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="_wz_testVideHeight" style="height: 100%;">
        <Row style="height: 100%;">
          <template v-if="Math.sqrt(numberWindows) == parseInt(Math.sqrt(numberWindows))">
            <template v-for="item,index in numberWindows">
              <i-col :span="24 / Math.sqrt(numberWindows)" style="background: #ccc;border:1px solid #fff;" :style="{height: 'calc(100% / '+Math.sqrt(numberWindows)+')'}">
                <div v-if="!videoList[index]" class="_wz_video_static"></div>
                <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" :CH="index" :videoId="'mmiid'+index" v-else :videoUrl="videoList[index]"></videoComponent>
              </i-col>
            </template>
          </template>

          <template v-else-if="numberWindows == 6">
            <i-col :span="16" style="background: #ccc;height: calc(100% / 3 * 2);border:1px solid #fff;">
              <div v-if="!videoList[0]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="0" videoId="mmiid0" v-else :videoUrl="videoList[0]"></videoComponent>
            </i-col>
            <i-col :span="8" style="background: #ccc;height: calc(100% / 3);border:1px solid #fff;">
              <div v-if="!videoList[1]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="1" videoId="mmiid1" v-else :videoUrl="videoList[1]"></videoComponent>
            </i-col>
            <i-col :span="8" style="background: #ccc;height: calc(100% / 3);border:1px solid #fff;">
              <div v-if="!videoList[2]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="2" videoId="mmiid2" v-else :videoUrl="videoList[2]"></videoComponent>
            </i-col>
            <i-col :span="8" style="background: #ccc;height: calc(100% / 3);border:1px solid #fff;">
              <div v-if="!videoList[3]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="3" videoId="mmiid3" v-else :videoUrl="videoList[3]"></videoComponent>
            </i-col>
            <i-col :span="8" style="background: #ccc;height: calc(100% / 3);border:1px solid #fff;">
              <div v-if="!videoList[4]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="4" videoId="mmiid4" v-else :videoUrl="videoList[4]"></videoComponent>
            </i-col>
            <i-col :span="8" style="background: #ccc;height: calc(100% / 3);border:1px solid #fff;">
              <div v-if="!videoList[5]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="5" videoId="mmiid5" v-else :videoUrl="videoList[5]"></videoComponent>
            </i-col>
          </template>

          <template v-else-if="numberWindows == 8">
            <i-col :span="18" style="background: #ccc;height: calc(100% / 4 * 3);border:1px solid #fff;">
              <div v-if="!videoList[0]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="0" videoId="mmiid0" v-else :videoUrl="videoList[0]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[1]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="1" videoId="mmiid1" v-else :videoUrl="videoList[1]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[2]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="2" videoId="mmiid2" v-else :videoUrl="videoList[2]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[3]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="3" videoId="mmiid3" v-else :videoUrl="videoList[3]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[4]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="4" videoId="mmiid4" v-else :videoUrl="videoList[4]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[5]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="5" videoId="mmiid5" v-else :videoUrl="videoList[5]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[6]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="6" videoId="mmiid6" v-else :videoUrl="videoList[6]"></videoComponent>
            </i-col>
            <i-col :span="6" style="background: #ccc;height: calc(100% / 4);border:1px solid #fff;">
              <div v-if="!videoList[7]" class="_wz_video_static"></div>
              <videoComponent :recordedType="recordedType" :coreVehicle="coreVehicle" CH="7" videoId="mmiid7" v-else :videoUrl="videoList[7]"></videoComponent>
            </i-col>
          </template>
        </Row>
      </div>
    </Card>
  </div>
</template>

<script>
import videoComponent from './videoComponent.vue'
export default {
  components: {
    videoComponent
  },
  props:['videoAddress','selectData'],
  data() {
    return {
      coreVehicle:{},
      videoRequestNum:[0,0,0,0,0,0],//6个视频 每个5次
      numberWindows:6,
      videoList:[null,null,null,null,null,null,],
      recordedType:false,//录播状态  true 历史(暂停)    false 录播(停止)
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this

  },
  methods: {//执行的方法
    //视频状态
    changeVideo(name) {
      var that = this;
      if (name == "stopVideo") {//停止所有视频
        that.videoRequestNum = [0,0,0,0,0,0];//6个视频 每个5次
        that.videoList = [null,null,null,null,null,null,];

        that.axios.post(that.apiUrl.webApi + "/vehicleRealVideo/videoEnd", that.selectData)

      }
    },
    videoRequest(data,i){
      let that = this;
      if(that.videoRequestNum[i] > 5){
        that.$Message.error('您所选的数据未查询到车辆视频' + i);
        return false;
      }
      that.axios.get('http://172.16.18.233:3333/checkVideo/' + data.carSimNo + '-'+(i+1), {}).then(res => {
      // that.axios.post(that.apiUrl.webApi + '/checkVideo/' + data.carSimNo + '-'+(i+1), {}).then(res => {
        that.videoRequestNum[i] = that.videoRequestNum[i] + 1;//累加
        if (!!res) {
          if(res.data.subCode == 0){
            that.$set(that.videoList,i, that.apiUrl.webApi + '/video/' + that.videoAddress.carSimNo + (i+1))
          }else{
            setTimeout(function(){
              that.videoRequest(data,i);
            },1000)
          }
        }
      }).catch(err => {
        console.log("失败", err)
      })
    },
  },
  watch: {//监听
    videoAddress(news,old){
      let that = this;
      that.coreVehicle = news;
      that.videoRequestNum = [0,0,0,0,0,0];//6个视频 每个5次
      that.videoList = [null,null,null,null,null,null,];
      for(let i = 0 ; i < that.videoRequestNum.length ; i++){
        that.videoRequest(news,i)
      }
    },
  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_testVide1 {
  padding: 0px!important;
  ._wz_video_static{
    background: url('../../assets/video1.png') no-repeat;
    width: 100%;
    height: 100%;
    background-position: 50% 50%;
    background-size: contain;
    background-color: #000000;
  }

  .ivu-card-body {
    height: calc(100% - 51px);
  }

  .tv_box span {
    display: inline-block;
    padding: 0 5px;
    position: relative;
    margin-right: 20px;

    i {
      //background: url('../../../assets/icon_s.png') 0px -0px no-repeat;
      background: url('../../assets/icon_s.png') 0px -0px no-repeat;
      width: 14px;
      height: 14px;
      cursor: pointer;
      display: inline-block;
      font-style: normal;
      vertical-align: middle;
      float: left;

    }
    .icon_num1{
      background-position: -100px -326px;
    }

    .icon_num1:hover{
      background-position: -385px -50px;
    }

    .icon_num31 {
      background-position: -120px -326px;
    }

    .icon_num31:hover {
      background-position: -120px -346px;
    }

    .icon_num4 {
      background-position: -100px -326px;
    }

    .icon_num4:hover {
      background-position: -385px -50px;
    }

    .icon_num51 {
      background-position: -140px -326px;
    }

    .icon_num51:hover {
      background-position: -140px -346px;
    }

    .icon_num61 {
      background-position: -160px -326px;
    }

    .icon_num61:hover {
      background-position: -160px -346px;
    }

    .icon_num71 {
      background-position: -180px -326px;
    }

    .icon_num71:hover {
      background-position: -180px -346px;
    }

    .icon_num81 {
      background-position: -200px -326px;
    }

    .icon_num81:hover {
      background-position: -200px -346px;
    }


    .icon_num1:hover + .icon_xl {
      background-position: -414px -50px;
    }

    .icon_xl {
      background-position: -193px -50px;
      width: 5px;
      height: 14px;
      margin-left: 2px;
    }
  }

  .tv_box span:hover .t_box {
    display: block;
  }

  .t_box {
    display: none;
    position: absolute;
    top: 28px;
    right: 0;
    z-index: 999;
    width: 110px;
    height: 64px;
    line-height: 18px;
    text-align: left;
    border: #d6d6d6 solid 1px;
    background-color: #fff;
    box-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;

    .stopAll {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 50%;
      cursor: pointer;
    }

    .stopAllA:hover {
      color: white;
      background: #1890ff;
    }

    .stopAllB:hover {
      color: white;
      background: #1890ff;
    }
  }
  #cmsv6flash * {
    box-sizing: content-box ;
  }
}

</style>
